<template>
	<view>
		<view class="head" style="color:#ffffff">
			<view class="left">
				<view class="">账号余额</view>
				<view class="">￥{{Member[0].Amount}}</view>
			</view>
			<view class="right">
				<text @click="navTo('/pages/MemberTopUp/detail')">交易明细</text>
				<text 
					class="cell-more yticon icon-you"
					style="color: #ffffff; margin-left:10rpx;">
				</text>
			</view>
		</view>
		<view class="mian">
			<u-tabs :list="tabList" :current="id" activeColor="#fa436a" barWidth="120" @change="onMoney"></u-tabs>
			<view class="pay" v-if="id===0">
				<text class="choose">请选择充值的金额</text>
				<radio-group class="radio-group" @change="radioChange" @click="topUp">
					<view class="box" v-for="(item,index) in amountList" :key="index">
						<text class="money">￥{{item.FAmount}}</text>
						<text>立赠{{(item.FGiveAmt).toFixed(2)}}元余额</text>
						<label class="readio-label">
							<radio :value="item.FAmount" :data-Setamount="item.FGiveAmt" :id="item.FItemID" checked="{{}}" />
						</label>
					</view>
				</radio-group>
			</view>
			<view class="custom" v-if="id===1">
				<text class="cus-title">请输入金额</text>
				<input class="cus-money" type="digit" value="" placeholder="￥" @blur="onAmount">
			</view>
			<!-- <view class="title" @click="onMoney">
				<text :class="id==0?'active':''" data-id='0'>充值活动</text>
				<text :class="id==1?'active':''" data-id='1'>自定义充值</text>
			</view> -->
			<!-- <swiper @change="onSwiper" :current="id">
				<swiper-item item-id="0">
					<view class="pay">
						<text class="choose">请选择充值的金额</text>
						<radio-group class="radio-group" @change="radioChange" @click="topUp">
							<view class="box" v-for="(item,index) in amountList" :key="index">
								<text class="money">￥{{item.FAmount}}</text>
								<text>立赠{{(item.FGiveAmt).toFixed(2)}}元余额</text>
								<label class="readio-label">
									<radio :value="item.FAmount" :data-Setamount="item.FGiveAmt" :id="item.FItemID" checked="{{}}" />
								</label>
							</view>
						</radio-group>
					</view>
				</swiper-item>
				<swiper-item item-id="1">
					<view class="custom">
						<text class="cus-title">请输入金额</text>
						<input class="cus-money" type="digit" value="" placeholder="￥" @blur="onAmount">
					</view>
				</swiper-item>
			</swiper> -->
			<button class="way" id="pay" @click="way">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Member: {},
				id: 0,
				amountList: [], //充值金额的方案集合
				Amounts: '', //充值的金额
				setAmount: '', //充值方案中的赠送金额
				itemID: '', //充值方案的id
				topupID: 0, //button的记录，避免点击过多/重复
				tabList:[
					{name:'充值活动'},
					{name:'自定义充值'},
				],
				current: 0,
			};
		},
		onLoad() {
			// this.Member = uni.getStorageSync('Members');
			// console.log(this.Member)
			this.membership();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url,
				})
			},
			onSwiper(e) {
				this.id = e.target.current;
			},
			onMoney(e) {
				this.id = e
			},
			radioChange(e) {
				this.Amounts = e.detail.value; //金额
			},
			topUp(e) {
				this.setAmount = e.target.dataset.setamount; //赠送金额
				this.itemID = e.target.id; //充值方案的id
			},
			onAmount(e) {
				this.Amounts = e.detail.value; //金额
			},
			//充值赠送积分、金额列表
			givenAmount: function() {
				this.$util.util('MemberShop/DepositGiveData', '', 'GET').then(res => {
					this.amountList = res
				}).catch(error => {
					console.log(error);
				})
			},
			way() {
				var data = {
					Amount: this.Amounts,
					Id: this.itemID,
					TopupType: 0,
					setAmount: this.id === 0?this.setAmount:0,
					miniType: 'Mall',
				};
				if (this.topupID == 0) {
					this.onWay('MemberShop/WxPayApply', data);
				} else {
					console.log('你的速度太快了，我跟不上')
				}
			},
			//支付
			onWay(url, data) {
				this.$util.util(url, data, 'GET').then(res => {
					this.topupID = 1;
					let data = res.respData;
					uni.requestPayment({
						timeStamp: res['timeStamp'] || data.payTimeStamp,
						nonceStr: res['nonceStr'] || data.paynonceStr,
						package: res['payPackage'] || data.payPackage,
						signType: res['signType'] || data.paySignType,
						paySign: res['paySign'] || data.paySign,
						success: res => {
							this.topupID = 0;
							uni.showLoading({
								title: '支付成功更新中'
							});
							setTimeout(()=>{
								uni.hideLoading();
								this.membership();
							},1000)
						},
						fail: error => {
							this.topupID = 0;
							if(error.errMsg=="requestPayment:fail cancel"){
								this.$api.msg('您已取消支付');
							}else{
								this.$api.msg('支付失败');
							}
						},
						// complete: () => {
						// 	console.log('11111');
						// 	this.membership();
						// }
					})
				}).catch(error => {
					uni.showToast({
						title: error.data.msg,
						icon: 'none',
						duration: 3000,
						success: res => {}
					})
					this.topupID = 0;
				})
			},
			//获取会员资料
			membership() {
				this.$util.util('MemberShop/GetMemberData', '','GET').then(res => {
					// console.log('账号余额',res[0].Amount);
					//记录会员卡信息
					// uni.setStorageSync('Members', res);
					this.Member = res;
					this.givenAmount();
				}).catch(error => console.log(error))
			},
		}
	}
</script>

<style lang='scss'>
	.head{
		padding: 40upx 20upx;
		display:flex;
		justify-content: space-between;
		align-items: center;
		background-color: #DD524D;
		.left{
			text-align: center;
		}
	}
	.mian{
		width: 100%;
		border-top: 4upx solid #333;
		.pay{
			margin: 25rpx 25rpx 0 25rpx;
			color: #909399;
			font-size: 25upx;
		}
		.box{
			border: 2upx solid #fa436a;
			padding: 30upx 20upx;
			margin: 15upx 0;
			float: left;
			width: 700upx;
			position: relative;
			.money{
				font-size: 38upx;
				color: #000;
			}
			text{
				float: left;
				display: block;
				width: 100%;
			}
			.readio-label{
				position: absolute;
				right: 50upx;
				top: 50upx;
			}
		}
	}
	.way{
		position: fixed;
		bottom:env(safe-area-inset-bottom);
		left:20upx;
		width: 700upx;
		border-radius:10upx;
		background-color: #DD524D;
		border: none;
		color:#fff;
	}
	.custom{
		width: 700upx;
		height: 80upx;
		line-height: 80upx;
		margin: 25rpx 25rpx 30rpx 25rpx;
		float: left;
		font-size: 35upx;
		text{
			width: auto;
			float: left;
		}
		input{
			width: 500upx;
			height: 80upx;
			line-height: 80upx;
			float: left;
			margin-left: 15upx;
			border-bottom: 2upx solid #fa436a;
		}
	}
</style>
